import React,{useRef, useState} from 'react'
import { Button, SearchBar, Collapse, Toast } from 'antd-mobile'

// 12、正确实现搜索页面功能（默认展示、展开展示） 11：40
// 13、正确实现清空历史搜索  11：54
// 14、考虑没有搜索记录时，友好提示 11：54

import "./style.scss"
import { SearchBarRef } from 'antd-mobile/es/components/search-bar'
function Index() {
    const searchRef = useRef<SearchBarRef>(null)
    const[historys,setHisTory]= useState([
        'rem与vw适配',
        '类组件的优化',
        "js作用域面试题",
        'react hooks',
        'React NProgess',
        "React顶部进度条",
        'react hooks',
        'React NProgess',
        "React顶部进度条",
    ])
    const deleteS=()=>{
        setHisTory(['您目前还有没有搜索过~'])
    }
    const addItem=(val:any)=>{
        console.log(val)
    }
    return (
        <div className='searchWrap'>
            <div className='head'>
                <SearchBar ref={searchRef}  placeholder='请输入内容' onSearch={val => addItem(val)}/>
            </div>
            <div className="showHistory">
                <button onClick={()=>deleteS()}>清空</button>
                <Collapse defaultActiveKey={['1']}>
                    
                    <Collapse.Panel key='1' title='历史记录'>
                        <div className='spanBox'>
                        {
                            historys.map((v,i)=>{
                                return(
                                    <span key={i}>{v}</span>
                                )
                            })
                        }
                        </div>
                    </Collapse.Panel>
                </Collapse>
            </div>
        </div>
    )
}

export default Index
function value(value: any): void {
    throw new Error('Function not implemented.')
}

